<template>
  <el-tag 
    :type="tagType" 
    :size="size"
    :effect="effect"
    class="association-status-tag"
  >
    <el-icon class="status-icon" v-if="showIcon">
      <component :is="statusIcon" />
    </el-icon>
    {{ statusText }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  Clock,
  Loading,
  Check,
  Close,
  Warning,
  CircleCheck,
  Document
} from '@element-plus/icons-vue'

interface Props {
  type: string // 关联类型：tasks, bugs, requirements
  status: string
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'
  showIcon?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light',
  showIcon: true
})

// 不同类型的状态配置
const statusConfigs = {
  tasks: {
    todo: { type: 'info', text: '待办', icon: Clock },
    in_progress: { type: 'warning', text: '进行中', icon: Loading },
    testing: { type: 'primary', text: '测试中', icon: Document },
    done: { type: 'success', text: '已完成', icon: Check },
    cancelled: { type: 'danger', text: '已取消', icon: Close }
  },
  bugs: {
    open: { type: 'danger', text: '打开', icon: Warning },
    in_progress: { type: 'warning', text: '处理中', icon: Loading },
    resolved: { type: 'success', text: '已解决', icon: Check },
    closed: { type: 'info', text: '已关闭', icon: CircleCheck },
    rejected: { type: 'danger', text: '已拒绝', icon: Close }
  },
  requirements: {
    draft: { type: 'info', text: '草稿', icon: Document },
    review: { type: 'warning', text: '评审中', icon: Clock },
    approved: { type: 'success', text: '已批准', icon: Check },
    development: { type: 'primary', text: '开发中', icon: Loading },
    testing: { type: 'warning', text: '测试中', icon: Document },
    completed: { type: 'success', text: '已完成', icon: CircleCheck },
    rejected: { type: 'danger', text: '已拒绝', icon: Close }
  }
}

// 计算属性
const statusConfig = computed(() => {
  const typeConfig = statusConfigs[props.type as keyof typeof statusConfigs]
  if (!typeConfig) return { type: 'info', text: props.status, icon: Document }
  
  return typeConfig[props.status as keyof typeof typeConfig] || 
         { type: 'info', text: props.status, icon: Document }
})

const tagType = computed(() => statusConfig.value.type)
const statusText = computed(() => statusConfig.value.text)
const statusIcon = computed(() => statusConfig.value.icon)
</script>

<style scoped>
.association-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-icon {
  font-size: 12px;
}
</style>